<template>
	<view class="body">
		<view class="">
			<up-notify ref="uNotifyRef" message="Hi uview-plus"></up-notify>
		</view>
		<view class="top">
			<view class="left" @click="goInform">
				<view class='number' v-if="number1">{{message?.interaction_count}}</view>
				<up-icon name="chat" size="23" color="#d81e06"></up-icon>
				<span>互动</span>
			</view>
			<view class="right" @click="goFansList">
				<view class='number' v-if="number2">{{message?.new_fans_count}}</view>
				<up-icon name="heart" size="23" color="#d81e06"></up-icon>
				<span>粉丝</span>
			</view>
		</view>
		<view class="chatList" v-for="(item,i) in chatdatalist">
			<chat :data='item'></chat>
		</view>
	</view>
</template>
<script lang="ts" name="" setup>
	import { onMounted, ref, reactive } from 'vue'
	import { GetMessage, GetchatRooms } from '../../apis/message'
	import chat from '../../components/chat.vue'
	import { messageStore } from '../../store/modules/message'
	// import login from '../../common/login.js'
	const useStore = messageStore();
	let message = ref()
	let number1 = ref<boolean>(false)
	let number2 = ref<boolean>(false)
	let newMessage = ref<number>(0)
	let chatdatalist = ref()
	//顶部提示
	const uNotifyRef = ref(null);
	const notifyData = reactive({
		top: 0,
		type: 'error',
		color: '#000',
		bgColor: '#e8e8e8',
		message: '你有一条新消息',
		duration: 1000 * 3,
		fontSize: 20,
		safeAreaInsetTop: true
	})


	onMounted(() => {
		//GetMessageData()
		GetchatRoomsdata()
		//新通知角标
		if (useStore.interaction_count > 0) {
			number1.value = true
		}
		//新关注角标
		if (useStore.new_fans_count > 0) {
			number2.value = true
		}

	})
	const goFansList = function () {
		uni.navigateTo({
			url: `/pages/fansList/fansList`
		})
	}
	const goInform = function () {
		uni.navigateTo({
			url: `/pages/inform/inform`
		})
	}
	// //轮询获取是否有消息提醒
	// const GetMessageData = () => {
	// 	const fetchData = async () => {
	// 		//获取当前页面栈的实例
	// 		let pages = getCurrentPages();
	// 		//获取当前页面
	// 		let currentPage = pages[pages.length - 1];
	// 		let url = currentPage.route;
	// 		console.log(url);
	// 		if (url == 'pages/home/index') {
	// 			console.log('这是弹窗');
	// 			getuNotify()
	// 		}
	// 		try {
	// 			const res = await GetMessage();
	// 			console.log(res);
	// 			message.value = res.data
	// 			newMessage.value = message.value.interaction_count + message.value.new_fans_count
	// 			//taabr设置下标
	// 			if (newMessage.value > 0) {
	// 				uni.setTabBarBadge({
	// 					index: 1, //tabbar下标
	// 					text: newMessage.value.toString() //数字
	// 				})
	// 			}
	// 			//新通知角标
	// 			if (message.value.interaction_count > 0) {
	// 				number1.value = true
	// 			}
	// 			//新关注角标
	// 			if (message.value.new_fans_count > 0) {
	// 				number2.value = true
	// 			}


	// 		} catch (error) {
	// 			// 错误处理逻辑
	// 			console.error('An error occurred while executing Captcha function:', error);
	// 		}
	// 	};

	// 	setInterval(() => {
	// 		fetchData();
	// 	}, 4000);
	// }

	const GetchatRoomsdata = async () => {
		try {
			const res = await GetchatRooms();
			chatdatalist.value = res.data
			console.log(chatdatalist.value);
		} catch (error) {
			// 错误处理逻辑
			console.error('An error occurred while executing Captcha function:', error);
		}
	}
	//顶部提示
	const getuNotify = function () {
		// console.log(this.$refs.uNotify);
		console.log(uNotifyRef.value);
		uNotifyRef.value.show({
			top: 10,
			type: 'error',
			color: '#000',
			bgColor: '#ffff7f',
			message: '111111111111',
			duration: 1000 * 3,
			fontSize: 20,
			safeAreaInsetTop: true
		})
		// 也可以通过主题形式调用，如：
		// this.$refs.uNotify.primary('Primary主题')
	}
</script>

<style scoped lang="scss">
	.top {
		padding: 10upx 10upx 10upx 10upx;
		display: flex;
		justify-content: space-around;
		color: #d81e06;
		font-weight: 560;

	}

	.number {
		height: 25upx;
		width: 25upx;
		font-size: 18upx;
		color: white;
		background-color: #d81e06;
		margin-left: 27upx;
		position: absolute;
		z-index: 999;
		text-align: center;
		line-height: 25upx;
		border-radius: 30upx;
	}
</style>